<template>
    <div>
        <mHeader></mHeader>
        <div class="main-con">
            <div class="menu_outer">
                <div class="menu">
                    <div style="">
                        <div class="fix_m">
                            <div @click="getId(2, '本站声明')" :class="{ active: id == 2 }">本站声明</div>
                            <div @click="getId(3, '用户协议')" :class="{ active: id == 3 }">用户协议</div>
                            <div @click="getId(4, '使用指南')" :class="{ active: id == 4 }">使用指南</div>
                            <div @click="getId(5, '合作资讯')" :class="{ active: id == 5 }">合作资讯</div>
                            <div @click="dialogVisible = true">意见反馈</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rightMain">
                <div class="outer">
                    <p class="title">
                        {{ title }}
                    </p>
                    <div class="content" v-html="content"></div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="700px">
            <span slot="title" class="dialog-header">
                <i style="color:#d41f19;margin-right: 12px;" class="iconfont">&#xe797;</i>意见反馈
            </span>
            <el-form ref="form" label-width="6.25vw">
                <div class="select">
                    <el-form-item label="反馈内容:" required>
                        <el-input type="textarea" v-model="remark" placeholder="请输入反馈内容"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFeed">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: 1,
            dialogVisible: false,
            remark: '',
            title: '',
            content: '',
        };
    },
    computed: {
        path() {
            return this.$route.path
        }
    },

    mounted() {
        let id = this.$route.query.id
        if (id) {
            this.id = id
            this.getInfo()
        }

    },

    methods: {
        addFeed() {
            let params = {
                content: this.remark,
            }
            this.$api.addFeed(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.remark = ''

                }
            })
        },

        getInfo() {
            let params = {
                id: this.id,
            }
            this.$api.getNews(params).then(res => {
                if (res.data.code == 1) {
                    this.title = res.data.data.title
                    this.content = res.data.data.post_content
                }

            })
        },
        getId(id, t) {
            this.id = id
            // this.title = t
            this.getInfo()
        },
        onSubmit() {
            console.log('submit!', this.form);
        },
        goPage(url) {
            if (this.path != url) {
                this.$router.push(url)
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.main-con {
    display: flex;

}

.rightMain {
    flex: 1;

    // overflow-y: auto;
    .outer {
        padding: 0 50px;
        min-height: 500px;

        .content {

            ::v-deep span,
            p,
            div {
                text-wrap-mode: wrap !important;
                word-break: break-all !important;
            }
        }

        .title {
            padding: 23px 0 43px;
            font-weight: bold;
            font-size: 36px;
            color: #1068E7;
            text-align: center;
        }
    }
}

.menu_outer {
    width: 9.38rem;
    margin-right: 1.04rem;

    .menu {
        width: 9.38rem;
        height: 100%;
        background: #E7F1FE;
        padding: 30px 1.15rem;
        position: -webkit-sticky;
        left: 8.33rem;
        position: sticky;
        top: 128px;
        min-height: calc(100vh - 128px);
>div{
    position: sticky;top: 128px;
}
        .fix_m {

            >div {
                cursor: pointer;
                margin-bottom: 1.25rem;
                font-weight: 400;
                font-size: 1.25rem;
                color: #333333;

                &:hover {
                    color: #1068E7;
                }
            }
        }

        .list {
            border-top: 0.01rem solid #CCCCCC;
            padding-top: 1.51rem;

            >div {
                cursor: pointer;
                margin-bottom: 1.25rem;
                font-weight: 400;
                font-size: 1.25rem;
                color: #333333;

                &:hover {
                    color: #1068E7;
                }
            }
        }
    }

    .active {
        color: #1068E7 !important;
        font-weight: bold !important;
    }
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}
</style>